<template>
  <div class="home">
    <navigationBar class="homeNav">
      <template v-slot:center>
        购物街
      </template>
    </navigationBar>
    <!-- 占位 默认不显示 -->
    <tabControl :titles="['流行','新款','精选']" class="tabcontrol" :class="{fixedTop:isFixedTop}" @tabClick="handleTabclick"
    ref="tabControl1" v-show="isFixedTop"
    ></tabControl>
    <!-- 为scroll传 值是为了让他监听数据的变化 加上冒号 就能识别类型-->
    <scroll
      :data="showGoodsList"
      ref="scroll"
      :pull-up-load="true"
      @pullMore="handleLoadMore"
      @scroll="handleposition"

      class="content"
    >
      <homeSwiper :banners="banners" @bannerLoaded="handleBannerLoaded"></homeSwiper>
      <homerecommend :recommends="recommends"></homerecommend>
      <featureView></featureView>
      <tabControl :titles="['流行','新款','精选']" class="tabcontrol" @tabClick="handleTabclick"
      ref="tabControl2"
      ></tabControl>
      <goodsList :goods="showGoodsList"></goodsList>
    </scroll>
    <!-- 组件是不能直接监听事件的，要加上native 监听组件根元素原生事件 -->
    <backtop @click.native="handleBackTop" v-show="backTopShow"></backtop>
  </div>
</template>

<script>
  import navigationBar from 'components/common/navigation-bar.vue'
  import tabControl from 'components/common/tabcontrol/tabcontrol.vue'
  import scroll from 'components/common/scroll/scroll.vue'

  import goodsList from 'components/context/goods/goods.vue'
  import backtop from 'components/context/backTop/backtop.vue'

  import {getHomeMultidata, getHomeGoods} from 'network/home.js'
  import homeSwiper from './childcpm/homeSwiper.vue'
  import homerecommend from './childcpm/homerecommend.vue'
  import featureView from './childcpm/FeatureView.vue'


  export default {
    data() {
      return {
        banners:[],
        recommends:[],
        // 数据模型
        goods:{
          "pop":{
            page:0,
            list:[]
          },
          "new":{
            page:0,
            list:[]
          },
          "sell":{
            page:0,
            list:[]
          }
        },
        // 只显示一次轮播图加载完成
        bannerIsloaded:false,
        currentIndex:'pop',
        // 控制backtop是否显示
        backTopShow:false,
        // 记录tabControl 的位置
        tcOffsetTop:0,
        // tabControl 是否吸顶
        isFixedTop:false,
        // 保存滚动后的状态
        saveY:0
      }
    },
    created(){
      this.getHomeMultidata()
      //初始化第一页的数据
      this.getHomeGoods('pop')
      this.getHomeGoods('new')
      this.getHomeGoods('sell')

    },
    // 使home页面保持滚动后的位置
    activated() {
       this.$refs.scroll.bs.refresh()
      // 事件不能为0 否则还是会回滚到顶部 设置为1可以解决
      // 或者先刷新也可以解决
      this.$refs.scroll.bs.scrollTo(0,this.saveY,0)

    },
    deactivated(){
     this.saveY = this.$refs.scroll.bs.y

    },
    methods:{
      getHomeMultidata(){
        getHomeMultidata().then(res=>{
          this.banners = res.data.data.banner.list
          this.recommends = res.data.data.recommend.list
        })
      },
      getHomeGoods(type){
        //动态获取到page值
        const page = this.goods[type].page+1
        getHomeGoods(type,page).then(res=>{
          const data = res.data.data
          this.goods[type].list.push(...data.list)
          this.goods[type].page += 1

        })
      },
      // 事件监听
      handleTabclick(index){
        const type = index==0?'pop':index==1?'new':index==2?'sell':'pop'
        //解决tabControl焦点不一致问题 这里应该可以使用vuex代替
        this.$refs.tabControl1.currentIndex = index
        this.$refs.tabControl2.currentIndex = index
        this.currentIndex = type
      },
      handleBackTop(){
       this.$refs.scroll.bs.scrollTo(0,0,500)
      },
      handleposition(position){
       //监听postions.y是否大于等于 tabControl的offsetTop

         // 决定是否吸顶
        this.isFixedTop = Math.abs(position.y)>this.tcOffsetTop

       this.backTopShow = Math.abs(position.y)>1000
      },
      handleBannerLoaded(){
        // 节流 只要轮播图图片下载一张完成后就能正确获取到它的高度
        if(this.bannerIsloaded) return
        // 此时获取tabControl 组件的 offsetTop
        // 每个组建对象都有一个$el属性 记录着这个组件中的元素
        // 获得初始的值
        this.tcOffsetTop = this.$refs.tabControl2.$el.offsetTop

        this.bannerIsloaded = true
      },
      handleLoadMore(){
        // console.log('到底了')
        this.getHomeGoods(this.currentIndex)
        // 每次触发 pullingUp 钩子后，你应该主动调用 finishPullUp() 告诉 BetterScroll 准备好下一次的 pullingUp 钩子。
        this.$refs.scroll.bs.finishPullUp()
      }

    },
    components: {
      navigationBar,
      tabControl,
      homeSwiper,
      homerecommend,
      featureView,
      goodsList,
      scroll,
      backtop
    },
    destroyed() {
      console.log('x')
    },
    computed:{
      showGoodsList:function(){
        return this.goods[this.currentIndex].list
      }
    }
  }
</script>

<style scoped>
  .home{
    padding-bottom:49px;
  }
  .homeNav{
    background-color: #FF8198;
    z-index: 999;
  }
  .fixedTop{
    position:fixed;
    top:44px;
    left:0;
    right:0;
    z-index: 999;
  }
  .content{
      overflow:hidden;
      position: absolute;
      top:44px;
      left:0;
      right:0;
      bottom:49px;
    }

</style>
